<template>
  <t-dialog
    header="分配数据权限"
    :visible.sync="visible"
    :onClose="closeDialog"
    :closeOnOverlayClick="false"
    width="600px"
    @confirm="onSubmit"
    :confirmBtn="{
        content: loading?'提交中...':'确认',
        theme: 'primary',
        loading: loading,
      }"
    top="5%"
  >
    <t-form :data="formData" :colon="true"  labelWidth="100px" :rules="rules" >
      <t-form-item label="角色名称" name="roleName">
        <t-input clearable v-model="formData.roleName" disabled :maxlength="30" placeholder="请输入角色名称"></t-input>
      </t-form-item>
      <t-form-item label="权限字符" name="roleKey">
        <t-input clearable v-model="formData.roleKey" disabled :maxlength="30" placeholder="请输入权限字符"></t-input>
      </t-form-item>
      <t-form-item label="权限范围" name="dataScope">
        <t-select v-model="formData.dataScope" :options="dataScopeOptions"></t-select>
      </t-form-item>
      <t-form-item v-if="formData.dataScope === '2'" label="数据权限" name="dataScope">
        <div class="menubox">
          <t-space :size="25">
            <t-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand()">展开/折叠
            </t-checkbox>
            <t-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll()">全选/全不选
            </t-checkbox>
            <t-checkbox v-model="deptCheckStrictly">父子联动</t-checkbox>
          </t-space>
          <t-tree ref="menu" class="tree-border" :expanded.sync="deptExpandedValue"
                  :value.sync="formData.deptIds" :keys="{value:'id'}" :check-strictly="!deptCheckStrictly"
                  checkable :expand-on-click-node="false" :data="deptOptions"></t-tree>
        </div>
      </t-form-item>
    </t-form>
  </t-dialog>
</template>

<script>
import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, sysServiceList, selectServiceListByRoleId } from "@/api/system/role";
import { treeselect as deptTreeselect, roleDeptTreeselect } from "@/api/system/dept";


export default {
  name: "edit-role-data-permisstion",
  props: ['roleId'],
  data() {
    return {
      visible: true,
      loading: false,
      formData: {
        roleName: "",
        roleKey: "",
        dataScope: "",
        deptIds: []
      },
      deptExpandedValue: [],
      deptExpand: true,
      deptNodeAll: false,
      deptCheckStrictly: true,
      deptOptions:[],
      rules: {},
      dataScopeOptions: [
        {
          value: "1",
          label: "全部数据权限"
        },
        {
          value: "2",
          label: "自定数据权限"
        },
        {
          value: "3",
          label: "本单位数据权限"
        },
        {
          value: "4",
          label: "本单位及以下数据权限"
        },
        {
          value: "5",
          label: "仅本人数据权限"
        }
      ],
    }
  },
  created() {
    this.handleDataScope();
  },
  methods: {
    /** 根据角色ID查询部门树结构 */
    getRoleDeptTreeselect(roleId) {
      roleDeptTreeselect(roleId).then(response => {
        this.deptOptions = response.depts;
        this.formData.deptIds = response.checkedKeys;
        this.handleCheckedTreeExpand();
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    /** 分配数据权限操作 */
    handleDataScope() {
      getRole(this.roleId).then(response => {
        response.data.deptIds = [];
        this.formData = response.data;
        this.getRoleDeptTreeselect(this.roleId);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getRole(){
      console.log("11");
    },
    onSubmit() {
      this.loading = true;
      dataScope(this.formData).then(response => {
        this.$message.success("修改成功");
        this.$emit("reload");
        this.$emit("update:visible", false);
        this.loading = false;
      }).catch((e) => {
        this.loading = false;
        this.$message.error(e.toString());
      });
    },
    closeDialog() {
      this.$emit("update:visible", false);
    },
    // 树权限（展开/折叠）
    handleCheckedTreeExpand() {
      if (this.deptExpandedValue.length>0){
        this.deptExpandedValue = [];
      }else {
        this.deptExpandedValue = [];
        this.deptOptions.forEach((val)=>{
          this.deptExpandedValue.push(val.id);
        })
      }
    },
    // 树权限（全选/全不选）
    handleCheckedTreeNodeAll() {
      if (this.formData.deptIds.length>0){
        this.formData.deptIds = [];
      }else {
        this.formData.deptIds = [];
        this.deptOptions.forEach((val)=>{
          this.formData.deptIds.push(val.id);
        })
      }
    },
  }
}
</script>

<style lang="less" scoped>
.servicebox {
  border: 1px solid #e5e6e7;
  padding: 5px;
  padding-left: 25px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}
.menubox{
  display: flex;
  flex-direction: column;
}
.tree-border {
  margin-top: 5px;
  border: 1px solid #e5e6e7;
  background: #FFFFFF none;
  border-radius:4px;
}
</style>
